<template>
  <div class="home-box">
    <icon-svg icon-name="baoxincai"></icon-svg>
    <br />
    svg:
    表情:
    <pre
      name="sendBox"
      contenteditable="true"
      class="send-textarea"
    >
      <!-- v-html="preContent" -->
      <icon-svg icon-name="baoxincai"></icon-svg>
    </pre>
    <ul class="face-wrapper">
      <li
        v-for="icon in icons"
        :key="icon"
      >
        <icon-svg
          :icon-name="icon"
          class="icon-svg"
          @click="onClickIcon(icon)"
        />
      </li>
      <li class="last-item"></li>
    </ul>
    <div class="line"></div>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component
export default class Home extends Vue {
  private name: string = 'Home'
  private icons: any[] = []
  private preContent: any = ''
  private beforeCreate() {
    this.name = '首页'
  }
  private created(): void {
    const ctx = require.context('/src/assets/icons/svg', true, /\.svg$/)
    this.icons = ctx.keys().map((e: string) => {
      return e.match(/[\w\-]+?\./)![0].replace('.', '')
    })
  }
  private onClickIcon(iconName: string) {
    // this.preContent += `<RenderIcon icon-name="${iconName}"></RenderIcon>`
  }
}
</script>

<style lang="scss" scoped>
.home-box {
  font-size: 22px;
}

.face-wrapper {
  width: 280px;
  height: 120px;
  border: 0.5px solid #ccc;
  overflow: auto;
  display: grid;
  font-size: 1.8rem;
  grid-template-columns: repeat(7, 30px);
  grid-column-gap: 10px;

  svg {
    transform: scale(0.9);
  }

  .icon-svg {
    cursor: pointer;
  }
}

.face-wrapper::-webkit-scrollbar {
  display: none;
}

.send-textarea {
  border: 1px solid;
  border-radius: 4px;
  box-sizing: border-box;
  width: 100%;
  height: 56px;
  padding: 0px 19px 0px 19px;
  background-color: #fff;
  color: #252525;
  font-size: 13px;
  font-family: inherit;
  word-break: break-all;
  white-space: normal;
  overflow-y: auto;
}
</style>
